<div class="card" [class.no-border]="!displayAddCommentButton && !model.isAddingNewComment && !model.commentRows.length">
  <div class="card-header comment-table-header" *ngIf="!model.isReadOnly && !model.isAddingNewComment && displayAddCommentButton">
    <button (click)="handleAddingNewCommentEvent()" type="button" class="btn btn-light btn-sm float-end">
      <i class="fas fa-comment"></i>&nbsp;<i class="fas fa-plus"></i>
    </button>
  </div>

  <ul class="list-group list-group-flush" >
    <li class="list-group-item" *ngFor="let comment of model.commentRows; let i = index; trackBy: trackByIndex">
      <tm-comment-row *ngIf="comment.originalComment"
                      [model]="comment"
                      [isVisibilityOptionEnabled]="!model.isReadOnly"
                      [isDisabled]="model.isReadOnly"
                      [mode]="CommentRowMode.EDIT"
                      [questionShowResponsesTo]="questionShowResponsesTo"
                      [response]="response"
                      [shouldHideSavingButton]="model.isReadOnly"
                      [shouldHideClosingButton]="model.isReadOnly"
                      [shouldHideEditButton]="model.isReadOnly"
                      [shouldHideDeleteButton]="model.isReadOnly"
                      (modelChange)="triggerCommentRowChange(i, $event)"
                      (deleteCommentEvent)="triggerDeleteCommentEvent(i)"
                      (saveCommentEvent)="triggerUpdateCommentEvent(i)"
                      (closeEditingEvent)="handleCloseEditingCommentRowEvent(i)"
      ></tm-comment-row>
    </li>
    <!-- "Add new comment" row -->
    <li class="list-group-item" *ngIf="!model.isReadOnly && model.isAddingNewComment" @collapseAnim>
      <tm-comment-row [model]="model.newCommentRow" [isDisabled]="false" [isVisibilityOptionEnabled]="true"
                      [mode]="CommentRowMode.ADD"
                      [questionShowResponsesTo]="questionShowResponsesTo"
                      [response]="response"
                      [shouldHideClosingButton]="shouldHideClosingButtonForNewComment"
                      (modelChange)="triggerModelChange('newCommentRow', $event)"
                      (saveCommentEvent)="triggerSaveNewCommentEvent()"
                      (closeEditingEvent)="triggerModelChange('isAddingNewComment', false)"
      ></tm-comment-row>
    </li>
  </ul>
</div>
